<script setup>
defineProps({
    icon: {
        type: [String, Object],
        default: "",
        component: String,
        size: String,
        color: String,
    },
    image: {
        type: Object,
        component: String,
        class: String,
        default: () => {},
    },
    title: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    description: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    col: {
        type: String,
        default: "",
    },
});
</script>
<script>
export default {
    inheritAttrs: false,
};
</script>
<template>
    <div :class="`${col ? col : 'col-md-6'}`">
        <div v-bind="$attrs" class="info">
            <i v-if="icon" class="material-icons text-gradient" :class="`${typeof icon == 'object' ? `text-${icon.color} text-${icon.size}` : 'text-success text-3xl'}`">{{ typeof icon == "object" ? icon.component : icon }}</i>
            <img v-if="image" :src="image.component" :class="image.class" />
            <h5 :class="typeof title == 'string' ? 'font-weight-bolder mt-3' : title.class">
                {{ typeof title == "string" ? title : title.text }}
            </h5>
            <div v-if="typeof description == 'string'">
                <p class="pe-5" v-for="(item, index) in description.split('  ')" :key="index">
                    {{ item }}
                </p>
            </div>
            <div v-else>
                <p :class="description.class" v-for="(item, index) in description.text.split('  ')" :key="index">
                    {{ item }}
                </p>
            </div>
        </div>
    </div>
</template>
